<template>
  <div class="routine_container">
    <div class="title">常规监控实时数据列表</div>

    <Card class="query">
      <div class="query_content">
        <div>
          <span>分组展示：</span>
          <Select
            v-model:value="query.group"
            mode="multiple"
            style="width: 260px"
            :max-tag-count="1"
            :options="options"
          ></Select>
        </div>
        <div>
          <Button type="primary" ghost @click="onReset">重置</Button>
        </div>
      </div>
    </Card>

    <Card class="card_content">
      <div v-for="item in groupList" :key="item.id">
        <template v-if="query.group.includes(item.id)">
          <div class="label">{{ item.label || '' }}</div>
          <div class="content">
            <div class="item" v-for="i in item.content" :key="i.CPU">
              <div class="item_title">
                <div>
                  <span style="font-weight: 700">主机名称</span>
                  <span style="margin-left: 15px; font-weight: 700"
                    >101.43.172.43</span
                  >
                </div>
                <ExclamationOutlined class="icon bgBlue" />
              </div>
              <div class="item_content">
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>CPU</div></Col>
                    <Col :span="18">
                      <div class="progress">
                        <Progress
                          :percent="i.CPU"
                          :size="[300, 20]"
                          :show-info="false"
                          strokeLinecap="butt"
                          :strokeColor="strokeColor(i.CPU)"
                        >
                        </Progress>
                        <div class="info" :style="customStyle(i.CPU)">
                          {{ i.CPU }}%
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>内存</div></Col>
                    <Col :span="18">
                      <div class="progress">
                        <Progress
                          :percent="i.memory"
                          :size="[300, 20]"
                          :show-info="false"
                          strokeLinecap="butt"
                          :strokeColor="strokeColor(i.memory)"
                        >
                        </Progress>
                        <div class="info" :style="customStyle(i.memory)">
                          {{ i.memory }}%
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>交换</div></Col>
                    <Col :span="18">
                      <div class="progress">
                        <Progress
                          :percent="i.exchange"
                          :size="[300, 20]"
                          :show-info="false"
                          strokeLinecap="butt"
                          :strokeColor="strokeColor(i.exchange)"
                        >
                        </Progress>
                        <div class="info" :style="customStyle(i.exchange)">
                          {{ i.exchange }}%
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>硬盘</div></Col>
                    <Col :span="18">
                      <div class="progress">
                        <Progress
                          :percent="i.hardDisk"
                          :size="[300, 20]"
                          :show-info="false"
                          strokeLinecap="butt"
                          :strokeColor="strokeColor(i.hardDisk)"
                        >
                        </Progress>
                        <div class="info" :style="customStyle(i.hardDisk)">
                          {{ i.hardDisk }}%
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>网络</div></Col>
                    <Col :span="18">
                      <div class="filed_item">
                        <div>
                          <ArrowDownOutlined class="icon grey" />
                          <span>6.77 k/s</span>
                        </div>
                        <div>
                          <ArrowUpOutlined class="icon grey" />
                          <span>52.77 k/s</span>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>流量</div></Col>
                    <Col :span="18">
                      <div class="filed_item">
                        <div>
                          <ArrowDownOutlined class="icon black" />
                          <span>6.77 k/s</span>
                        </div>
                        <div>
                          <ArrowUpOutlined class="icon black" />
                          <span>52.77 k/s</span>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>信息</div></Col>
                    <Col :span="18">
                      <div class="filed_item">
                        <div>
                          <BorderlessTableOutlined class="icon blue" />
                          <span>4 Core</span>
                        </div>
                        <div>
                          <MacCommandOutlined class="icon green" />
                          <span>16 GB</span>
                        </div>
                        <div>
                          <HddOutlined class="icon red" />
                          <span>284 GB</span>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>负载</div></Col>
                    <Col :span="18">
                      <div class="filed_item">
                        <div class="child">
                          <FundOutlined class="icon red" />
                          <span>3.29</span>
                        </div>
                        <div class="child">
                          <span>3.24</span>
                        </div>
                        <div>
                          <span>3.28</span>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
                <div class="filed">
                  <Row>
                    <Col :span="6"> <div>在线</div></Col>
                    <Col :span="18">
                      <div class="filed_item">
                        <div>
                          <ClockCircleOutlined class="icon blue" />
                          <span>25 天</span>
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import {
  ArrowDownOutlined,
  ArrowUpOutlined,
  BorderlessTableOutlined,
  ClockCircleOutlined,
  ExclamationOutlined,
  FundOutlined,
  HddOutlined,
  MacCommandOutlined,
} from '@ant-design/icons-vue';
import { Button, Card, Col, Progress, Row, Select } from 'ant-design-vue';

const options = ref([
  {
    label: '分组1',
    value: 1,
  },
  {
    label: '分组2',
    value: 2,
  },
  {
    label: '分组3',
    value: 3,
  },
]);
const query = ref({
  group: [1, 2],
});
const groupList = ref([
  {
    id: 1,
    label: '分组1',
    content: [
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
    ],
  },
  {
    id: 2,
    label: '分组2',
    content: [
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
    ],
  },
  {
    id: 3,
    label: '分组3',
    content: [
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
      {
        CPU: 57,
        memory: 100,
        exchange: 37,
        hardDisk: 57,
      },
    ],
  },
]);

const customStyle = (val) => {
  return {
    left: `calc(${val}% - 40px)`,
  };
};

const strokeColor = (val) => {
  if (val <= 30) {
    return '#52c41a';
  } else if (val <= 50) {
    return '#165dff';
  } else if (val <= 70) {
    return '#f4d07b';
  } else {
    return '#ff0f0f';
  }
};

const onReset = () => {
  query.value.group = [1, 2, 3];
};
</script>

<style scoped lang="scss">
.query_content {
  display: flex;
  justify-content: space-between;
}
.routine_container {
  height: 100%;
  .title {
    padding: 15px 0;
    font-weight: 700;
  }
  .query {
    margin-bottom: 15px;
  }
  .card_content {
    height: calc(100% - 145px);
    overflow-y: auto;
    :deep(.ant-card-body) {
      padding: 0 24px 24px;
    }
  }
  .label {
    // position: sticky;
    // top: 0;
    padding: 15px;
    font-weight: 700;
  }
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    .item {
      border: 1px solid #ccc;
      border-radius: 6px;
      &_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 15px;
        border-bottom: 1px solid #ccc;
      }
      &_content {
        padding: 8px 15px;
        .filed {
          // display: flex;
          padding: 10px 0;
          :deep(.ant-progress-inner) {
            border-radius: 0;
            border: 1px solid #ccc;
          }
          .progress {
            position: relative;
            .info {
              position: absolute;
              top: 2px;
            }
          }
          &_item {
            display: flex;

            div {
              margin-right: 10px;
            }
            .child {
              margin-right: 10px;
              padding-right: 10px;
              height: fit-content;
              border-right: 2px solid #000;
            }
          }
        }
      }
    }
  }
}
.icon {
  border-radius: 50%;
  margin-right: 5px;
  padding: 2px 3px;
  &.black {
    background-color: #000;
  }
  &.grey {
    background-color: #aaa;
  }
  &.red {
    color: red;
  }
  &.blue {
    color: blue;
  }
  &.green {
    color: green;
  }
  &.bgBlue {
    font-size: 12px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    background-color: blue;
  }
}
</style>

<route lang="json">
{
  "meta": {
    "title": "常规监控"
  }
}
</route>
